<template>
    <div class="bg">
         <div class="top_btn_list">
            <div class="cancel" @click="returnTap">取消</div>
            <div class="title">设置备注和标签</div>
            <div class="publish_btn" @click="returnTap">完成</div>
        </div>
       <div class="remarks_title">备注名</div>
       <div class="input_box">
           <input type="text" value="最熟悉的陌生人">
       </div>
       <div class="remarks_title magin_10">描述</div>
       <div class="input_box heig_80">
           <input type="text" value="" placeholder="添加更多备注信息">
       </div>
    </div>
</template>
<script>
export default {
    methods:{
         returnTap(){
         this.$router.go(-1)
        },
    }
}
</script>
<style  scoped>
.bg{
    width: 100vw;
    height: 100vh;
    background: #eee;
}
.top_btn_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
    height: 80px;
}
.title{
font-weight: 600;
}
.publish_btn{
    height: 30px;
    width: 55px;
    line-height: 30px;
    text-align: center;
    background: #0DC365;
    color: #fff;
    border-radius: 2px;
}
.remarks_title{
    margin: 5px 20px;
    color: #8B8B8B;
}
.input_box{
   
    height: 40px;

}
.input_box input{
     padding: 1% 5%;
    width: 90%;
    height: 90%;
    border: none;
    outline: none;
}
.heig_80{
    height: 80px;
}
.magin_10{
    margin: 10px 20px;
}
</style>